/**
 * Draw setting card tab change.
 * @param element
 */
function tabChange(element) {
    let segmentTab = document.querySelector("#segmentTab");
    let cylinderTab = document.querySelector("#cylinderTab");
    let segmentSetting = document.querySelector("#segmentSetting");
    let cylinderSetting = document.querySelector("#cylinderSetting");
    if (element.id === "segmentTab") {
        if (element.className === "nav-link") {
            element.className = "nav-link active";
            cylinderTab.className = "nav-link";
            segmentSetting.className = "card-body";
            cylinderSetting.className = "d-none card-body";
        }
    } else {
        if (element.className === "nav-link") {
            element.className = "nav-link active";
            segmentTab.className = "nav-link";
            segmentSetting.className = "d-none card-body";
            cylinderSetting.className = "card-body";
        }
    }
}

/**
 * Create input element for segment names and angles form.
 * @param parent
 * @param className
 * @param id {string}
 * @param type {string}
 * @param value
 */
function createInput(parent, className, id, type, value) {
    let input = document.createElement("input");
    input.id = id;
    input.className = className;
    input.type = type;
    input.value = value
    parent.append(input)
}

function createSpan(parent, string) {
    let span = document.createElement("span");
    span.className = "input-group-text";
    span.innerHTML = string;
    parent.append(span);
}

/**
 * Create all segment names and angles
 * @param segmentNames {[]}
 * @param segmentAngles {[]}
 */
function createSegmentInfoInput(segmentNames, segmentAngles) {
    let segmentInfo = document.querySelector("#segmentInfo");
    segmentInfo.innerHTML = "";
    for (let i = 0; i < segmentAngles.length; i++) {
        let div = document.createElement("div");
        div.className = "input-group input-group-sm mb-1";
        let number = i + 1 < 10 ? "0" + (i + 1) : i + 1;
        createSpan(div, number + ". ");
        createInput(div, "form-control text-center", "segmentName" + i, "text", segmentNames[i]);
        createInput(div, "form-control text-end", "segmentAngle" + i, "number", segmentAngles[i]);
        createSpan(div, "°");
        segmentInfo.append(div);
    }
}

function changeSegmentCount() {
    let count = document.querySelector("#segmentCount").value;
    if (count > 3) {
        let segmentNames = ["K", "B1"];
        for (let i = 2; i < count - 1; i++) {
            segmentNames.push("A" + (i - 1));
        }
        segmentNames.push("B2");
        let segmentAngles = [];
        for (let i = 0; i < segmentNames.length; i++) {
            //angles.push("");
            segmentAngles.push(360 / count);
        }
        createSegmentInfoInput(segmentNames, segmentAngles);
    }
}

let mainCanvas = document.querySelector("#canvas");
let rose = new RingRoseDrawer(mainCanvas);
let ringInsideNumber = 0, ringOutsideNumber = 0, segmentChange = false;

function getDrawInformation() {
    let segmentCount = document.querySelector("#segmentCount").value;
    let segmentInfo = document.querySelector("#segmentInfo");
    if (segmentCount < 3 || (segmentCount * 1) !== segmentInfo.children.length) return false;
    let segmentNames = [], segmentAngles = [];
    for (let i = 0; i < segmentCount; i++) {
        let temp = document.querySelector("#segmentName" + i).value;
        if (temp === "") return false;
        segmentNames.push(temp);
        temp = document.querySelector("#segmentAngle" + i).value;
        if (temp === "" || temp < 0) return false;
        segmentAngles.push(temp);
    }
    rose.segmentNames = segmentNames;
    rose.segmentAngles = segmentAngles;
    return true;
}

function setCanvasSize() {
    let screen = document.body.getBoundingClientRect();
    let canvasContainer = document.querySelector("#canvasContainer").getBoundingClientRect();

    let side = canvasContainer.width;
    mainCanvas.width = side;
    side > screen.height ? mainCanvas.height = screen.height : mainCanvas.height = side;
}

function drawRingRose() {
    setCanvasSize();
    rose.location.x = mainCanvas.width / 2;
    rose.location.y = mainCanvas.height / 2;
    getDrawInformation();
    rose.drawRing(ringInsideNumber, true);
    rose.drawRing(ringOutsideNumber, false);
    rose.drawCylinders(true);
}

function init() {
    document.querySelector("#segmentCount").value = 10;
    document.querySelector("#cylinderCount").value = 28;
    document.querySelector("#cylinderWord").value = "U";
    document.querySelector("#cylinderNumberStart").value = 1;
    document.querySelector("#cylinderNumberStep").value = 1;
    document.querySelector("#cylinderAngleStart").value = 0;

    let segmentNames = ["K", "B1", "A1", "A2", "A3", "A4", "A5", "A6", "A7", "B2"];
    let segmentAngles = [12.857142, 38.571428, 38.571428, 38.571428,
        38.571428, 38.571428, 38.571428, 38.571428, 38.571428, 38.571428];

    createSegmentInfoInput(segmentNames, segmentAngles);
    drawRingRose();
}

window.onload = init;
document.querySelector("#canvasContainer").addEventListener("resize", drawRingRose);